<template>
  <div :style="stylesConfig">
    <vue3VideoPlay
      v-bind="options"
      poster="https://go.dreamwq.com/videos/ironMan.jpg"
    />
  </div>
</template>

<script setup>
import { computed, toRefs } from "vue";
const mockData = "播放器";

const props = defineProps({
  value: {
    type: Object,
    default: () => {},
  },
  preview: {
    type: Boolean,
    default: () => false,
  },
});
const { styles } = toRefs(props.value);
const options = computed(() => {
  return {
    width: `${props.value.styles?.w / 100}rem`, //播放器高度
    height: `${props.value.styles?.h / 100}rem`, //播放器高度
    src:
      `${props.value.setups.componentContent}` ||
      "https://www.runoob.com/try/demo_source/mov_bbb.mp4", //视频源
    color: props.value.styles?.color || "#409eff", //主题色
    control: props.value.styles?.control || false, //是否显示控制器
    title: props.value.setups?.componentName || "gbbngh", //视频名称
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: props.value.styles?.autoPlay, //自动播放
    loop: props.value.styles?.loop, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
  };
});
const stylesConfig = computed(() => {
  return {
    width: `${props.value.styles?.w / 100}rem`,
    height: `${props.value.styles?.h / 100}rem`,
    position: props.preview ? "absolute" : "static",
    left: `${props.value.styles?.x}px`,
    top: `${props.value.styles?.y}px`,
  };
});
</script>
<style scoped lang="scss">
</style>
